<template>
    <n-spin size="large" :show="loading">
        <n-space vertical :size="24">
            <n-form label-placement="left" inline :show-feedback="false">
                <n-form-item>
                    <n-select :style="{ width: '250px' }" def v-model:value="param.query.advp" :options="opts" @update:value="execLoad" />
                </n-form-item>
                <n-button @click="doAdd">
                    <template #icon>
                        <n-icon :component="AddRound" />
                    </template>
                    添加
                </n-button>
            </n-form>
            <n-scrollbar :style="{ maxHeight: height, minHeight: height }">
                <n-grid v-if="items.length > 0" :cols="4" :x-gap="12" :y-gap="12">
                    <n-gi :span="1" v-for="adv in items">
                        <n-card size="small">
                            <n-space vertical>
                                <n-image :width="width / 4 - 50" :height="((width / 4 - 50) / 5) * 3" object-fit="cover" :src="adv.img" />
                                <n-space justify="space-between" :style="{ width: '100%' }" :align="'center'">
                                    <n-space>
                                        <n-text>{{ adv.title }}</n-text>
                                    </n-space>
                                    <n-space>
                                        <n-text depth="3">排序</n-text>

                                        <n-tag size="small" type="success">{{ adv.sort }}</n-tag>
                                    </n-space>
                                </n-space>
                                <n-space justify="space-between" :style="{ width: '100%' }" :align="'center'">
                                    <n-space>
                                        <n-switch size="small" v-model:value="adv.show" @update:value="(val: boolean) =>{ execShowSet(adv.id,val)}">
                                            <template #checked>显示</template>
                                            <template #unchecked>隐藏</template>
                                        </n-switch>
                                    </n-space>
                                    <n-space>
                                        <n-button
                                            size="small"
                                            @click="
                                                () => {
                                                    data = adv
                                                    formActive = true
                                                }
                                            "
                                        >
                                            编辑
                                        </n-button>
                                        <n-button type="error" size="small" @click="() => doDelete(adv)">删除</n-button>
                                    </n-space>
                                </n-space>
                            </n-space>
                        </n-card>
                    </n-gi>
                </n-grid>
                <n-empty v-else></n-empty>
            </n-scrollbar>
            <n-space justify="end">
                <n-pagination show-size-picker :page="param.pager.page" :page-size="param.pager.size" :page-count="pager.all" :page-sizes="[12, 24, 48]" @update:page="onChangePage" @update:page-size="onChangeSize">
                    <template #prefix="{}">当前 {{ pager.now }} / {{ pager.all }} 页，共 {{ pager.row }} 条数据</template>
                </n-pagination>
            </n-space>
        </n-space>
        <Form :item="data" :advp="param.query.advp" v-model:show="formActive" v-if="formActive" @refresh="execLoad"></Form>
    </n-spin>
</template>

<script lang="ts" setup>
import { Http } from '@/libs'
import { useStore } from '@/store'
import { computed, onActivated, ref } from 'vue'
import { AddRound } from '@vicons/material'
import Form from './Form.vue'

const { $notification: notification } = window
const { $dialog: dialog } = window

const store = useStore()
const loading = computed(() => store.state.loading.flag)
const height = computed(() => store.state.browser.innerHeight - 280 + 'px')
const width = computed(() => store.state.browser.innerWidth - (store.state.theme.collaps ? 64 : 272))

const opts = [
    {
        label: '首页顶部位置',
        value: 'IDX_BANNER',
    },
    {
        label: '首页预订车辆下方位置',
        value: 'IDX_CENTER',
    },
    {
        label: '首页底部位置',
        value: 'IDX_BOTTOM',
    },
    {
        label: '企业服务内位置',
        value: 'BSVC_INNER',
    },
    {
        label: '预订车辆界面位置',
        value: 'BOOK_INNER',
    },
]

const onChangeSize = (size: number) => {
    param.value.pager.page = 1
    param.value.pager.size = size
    execLoad()
}

const onChangePage = (page: number) => {
    param.value.pager.page = page
    execLoad()
}
const param = ref({
    query: {
        advp: opts[0].value,
        title: '',
    },
    pager: {
        page: 1,
        size: 12,
        time: new Date().getTime(),
    },
})

const pager = ref({
    now: 1,
    row: 0,
    all: 0,
    fms: 0,
})
const items = ref<any>([])

const execLoad = () => {
    Http.post('/ops/opx/adv/list', param.value).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        if (resp.data.pager.now == 1) {
            param.value.pager.time = resp.data.pager.fms
        }
        pager.value = resp.data.pager
        items.value = resp.data.items
    })
}

const formActive = ref(false)

const data = ref<any>({})

const doAdd = () => {
    data.value = undefined
    formActive.value = true
}

const doDelete = (row: any) => {
    dialog.error({
        title: `提示?`,
        content: `是否删除[${row.title}]?`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            execDelete(row.id)
        },
    })
}

const execDelete = (id: string) => {
    Http.post('/ops/opx/adv/delete', {
        ids: [id],
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        execLoad()
        notification.success({
            duration: 1500,
            title: '操作成功',
            content: '您已成功删除广告信息',
        })
    })
}

const execShowSet = (id: string, show: boolean) => {
    Http.post('/ops/opx/adv/show/set', {
        ids: [id],
        show: show,
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        execLoad()
    })
}

onActivated(() => {
    execLoad()
})
</script>
